import React, { useContext, useState } from "react";
import { Button, Modal, Form, Input, Select, message } from "antd";
import { PlusOutlined, EditOutlined, CloseOutlined } from "@ant-design/icons";
import {apiMod, group} from "../vo/request";
import {KeyContext} from './context';

const { Option } = Select;

export function FilefolderBtns(props: { className?: string,id:number }) {
    return (
        <div className={`flex ${props.className}`}>
            <Add id={props.id} />
            <Mod id={props.id}/>
            <Del id={props.id}/>
        </div>
    )
}

function Add(props: {id:number}) {
    const setSiderKey = useContext(KeyContext);
    const [isModalVisible, setModalVisible] = useState(false);
    const [isLoading, setLoading] = useState(false);
    const handleClick = (e: any) => {
        e.stopPropagation();
        console.log(e)
        setModalVisible(true);
    }
    const handleCancel = (e: any) => {
        e.stopPropagation();
        setModalVisible(false);
    }
    const onFinish = async (v: any) => {
        v.folderId = props.id;
        try {
            setLoading(true);
            let res = await apiMod.create(v);
            setLoading(false);
            if(res.data) {
                message.success(res.msg);
                setModalVisible(false);
                setSiderKey((key:any) => {
                    return key+1;
                })
            } else {
                message.error(res.msg);
            }
        } catch(err) {
            setLoading(false);
            console.log(err)
        }
    }
    return (
        <>
            <Button
                type="link"
                style={{ height: "auto", width: "auto", padding: 0 }}
                onClick={handleClick}
            >
                <PlusOutlined />
            </Button>
            <div onClick={(e) => { e.stopPropagation() }}>
                <Modal
                    title="添加接口"
                    visible={isModalVisible}
                    onCancel={handleCancel}
                    footer={[
                        <Button onClick={handleCancel} key="close">取消</Button>,
                        <Button loading={isLoading} form="addApi" htmlType="submit" type="primary" key="submit">提交</Button>
                    ]}
                    style={{ top: 300 }}
                >
                    <Form
                        name="addApi"
                        initialValues={{
                            apiMethod: "GET",
                            apiStatus: "creating"
                        }}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="apiName"
                            label="接口名称"
                        >
                            <Input></Input>
                        </Form.Item>
                        <Form.Item
                            name="apiMethod"
                            label="请求方法"
                        >
                            <Select>
                                <Option value="GET">GET</Option>
                                <Option value="POST">POST</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name="apiPath"
                            label="接口路径"
                        >
                            <Input></Input>
                        </Form.Item>
                        <Form.Item
                            name="apiStatus"
                            label="接口状态"
                        >
                            <Select>
                                <Option value="finished">已完成</Option>
                                <Option value="creating">开发中</Option>
                            </Select>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        </>
    )
}

function Mod(props: {id:number}) {
    const setSiderKey = useContext(KeyContext);
    const [isModalVisible, setModalVisible] = useState(false);
    const [isLoading, setLoading] = useState(false);
    const handleClick = (e: any) => {
        e.stopPropagation();
        setModalVisible(true);
    }
    const handleCancel = (e: any) => {
        e.stopPropagation();
        setModalVisible(false);
    }
    const onFinish = async (v: any) => {
        v.folderId = props.id;
        try {
            setLoading(true);
            let res = await group.rename(v);
            setLoading(false);
            if(res.data) {
                message.success(res.msg);
                setModalVisible(false);
                setSiderKey((key:any) => {
                    return key+1;
                })
            } else {
                message.error(res.msg);
            }
        } catch(err) {
            setLoading(false);
            message.error(err);
            console.log(err)
        }
    }
    return (
        <>
            <Button
                type="link"
                style={{ height: "auto", width: "auto", padding: 0 }}
                onClick={handleClick}
            >
                <EditOutlined />
            </Button>
            <div onClick={(e) => { e.stopPropagation() }}>
                <Modal
                    title="重命名"
                    visible={isModalVisible}
                    onCancel={handleCancel}
                    footer={[
                        <Button onClick={handleCancel} key="close">取消</Button>,
                        <Button loading={isLoading} htmlType="submit" form="rename" type="primary" key="submit">提交</Button>
                    ]}
                    style={{ top: 300 }}
                >
                    <Form
                        name="rename"
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="folderName"
                            label="名字"
                        >
                            <Input></Input>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        </>
    )
}

function Del(props: {id:number}) {
    const setSiderKey = useContext(KeyContext);
    const [isModalVisible, setModalVisible] = useState(false);
    const [isLoading, setLoading] = useState(false);
    const handleClick = (e: any) => {
        e.stopPropagation();
        setModalVisible(true);
    }
    const handleCancel = (e: any) => {
        e.stopPropagation();
        setModalVisible(false);
    }
    const onDelete = async () => {
        try {
            setLoading(true);
            let res = await group.delete(props.id);
            setLoading(false);
            if(res.data) {
                message.success(res.msg);
                setModalVisible(false);
                setSiderKey((key:any) => {
                    return key+1;
                })
            } else {
                message.error(res.msg);
            }
        } catch(err) {
            setLoading(false);
            message.error(err);
            console.log(err)
        }
    }
    return (
        <>
            <Button
                type="link"
                danger
                style={{ height: "auto", width: "auto", padding: 0 }}
                onClick={handleClick}
            >
                <CloseOutlined />
            </Button>
            <div onClick={(e)=> {e.stopPropagation()}}>
                <Modal
                    title="删除分类"
                    visible={isModalVisible}
                    onCancel={handleCancel}
                    footer={[
                        <Button onClick={handleCancel} key="close">取消</Button>,
                        <Button loading={isLoading} onClick={onDelete} type="primary" key="submit">提交</Button>
                    ]}
                    style={{ top: 300 }}
                >
                    确定要删除分类吗？此操作不可逆。
                </Modal>
            </div>

        </>
    )
}